<template>
    <div>
        <el-row class="wathdra_record">
            <el-col :span="24" class="form-title">
                <div class="form-title-con">
                    用户管理
                    &#X3000;
                    <el-dropdown @command="createUser">
                        <el-button type="primary" size="small">
                            新建用户<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-for="item in roleListData" :key="item.id" :command="item">{{item.roleName}}</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-col>
        </el-row>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column type="index" label="序号" width="55"> </el-table-column>
            <el-table-column prop="username" label="账号"> </el-table-column>
            <el-table-column prop="realName" label="姓名"> </el-table-column>
            <el-table-column prop="roleName" label="角色名称"> </el-table-column>
            <el-table-column prop="updateTime" label="角色类型"> </el-table-column>
            <el-table-column prop="updateTime" label="联系方式"> </el-table-column>
            <el-table-column prop="createTime" label="创建时间"> </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="removeCustomer(scope.row.id)"><i class="iconfont icon-shanchu icon_edit_style"></i> 删除</el-button>
                    <el-button type="text" size="small" @click="updateCustomer(scope.row)"><i class="iconfont icon-xiugai icon_edit_style"></i> 修改</el-button>
                    <el-button type="text" size="small" @click="detailCustomer(scope.row)"><i class="iconfont icon-xiangqing icon_edit_style"></i> 详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="right clear">
            <el-pagination
                    @size-change="onSizeChange"
                    @current-change="onFlipOver"
                    :current-page="pagination.currentPage"
                    :page-sizes="pagination.pageSizes"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>
        <DialogInput ref="detailCustomerDialog" title="用户详情">
            <div class="rem-dialog-con">
                <el-form label-width="160px" size="small" style="text-align: left;">
                    <el-form-item label="姓名：">
                        <el-col :span="24">
                            {{detailForm.realName}}
                        </el-col>
                    </el-form-item>
                    <el-form-item label="账号：">
                        <el-col :span="24">
                            {{detailForm.username}}
                        </el-col>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="Remfooter" class="submit-btn">
                <el-button size="small" type="info" class="hpx-cancel-color dialog-button" @click="closeDialogs()">关闭</el-button>
            </span>
        </DialogInput>

        <DialogIntTemplate
                ref="form-append-customer-service"
                :title="'新增'+dialogTitle"
                confirmText="添加"
                :form="formCustomerService"
                :rules="rulesCustomerService"
                @confirm="confirmCustomerService">
        </DialogIntTemplate>
        <DialogIntTemplate
                ref="form-update-customer-service"
                :title="'修改'+dialogTitle"
                confirmText="修改"
                :form="formCustomerService"
                :rules="rulesCustomerService"
                @confirm="updateUserService">
        </DialogIntTemplate>
    </div>    
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import Pagination from "@/types/Pagination";
    import DialogInput from '@component/common/DialogInput.vue';
    import DialogIntTemplate from '@component/common/DialogIntTemplate.vue';
    import { roleTypes } from '@/util/constantStatus'
    @Component({
        extends: Pagination,
        components: {
            DialogInput,
            DialogIntTemplate
        }
    })
    export default class CustomerManage extends Vue {
        form = {
            roleType: '',
            username: '',
            password: '',
            roleId: '',
            realName: '',
            description: ''
        }
        detailForm = {}
        dialogTitle: string = ''
        roleTypes = roleTypes;
        tableData = []
        roleListData = []

        async getCustomerList () {
            let customerForm = {
                currentPage: this.pagination.currentPage,
                pageSize: this.pagination.pageSize,
            }
            let res = await this.$http.post('user/users', customerForm)
            if (res.status = 200) {
                let { items, totalNum } = res.data;
                this.tableData = items;
                this.pagination.total = totalNum;
            }
        }
        formCustomerService = {
            realName: {
                value: '',
                label: '姓名',
                placeholder: '请输入姓名',
                type: 'input'
            },
            username: {
                value: '',
                label: '账号',
                placeholder: '请输入账号',
                type: 'input'
            },
            password: {
                value: '',
                label: '密码',
                placeholder: '请输入密码',
                type: 'input'
            },
            description: {
                value: '',
                label: '描述',
                placeholder: '请输入描述',
                type: 'textarea'
            }
        }
        rulesCustomerService = {
            'realName.value': [
                {required: true, message: '请输入姓名', trigger: 'blur'}
            ],
            'username.value': [
                {required: true, message: '请输入账号', trigger: 'blur'},
                {min: 2, message: '账号名称不得少于2个字符', trigger: 'blur'}
            ],
            'password.value': [
                {required: true, message: '请输入密码', trigger: 'blur'},
                {min: 6, message: '密码不得少于6个字符', trigger: 'blur'},
                {max: 20, message: '密码不得多于20个字符', trigger: 'blur'}
            ]
        }

        createUser (key: any) {
            this.dialogTitle = key.roleName;
            this.showCustomerService(key.id)
        }
        showCustomerService (roleId: string) {
            this.$refs['form-append-customer-service'].openDialog({
                roleId
            })
        }
        async confirmCustomerService (form) {
            // if (!this.formCustomerService.realName.value) {
            //     this.$alert('请输入姓名！','提示',{
            //         confirmButtonText: '确定',
            //         customClass: 'custom-message-box'
            //     }).catch(() => {})
            //     return;
            // }
            let res = await this.$http.post('user/add', form)
            if (res.status == 200) {
                this.getCustomerList();
            }
        }
        detailCustomer (data) {
            this.detailForm = data;
            this.$refs['detailCustomerDialog'].openDialog();
        }
        removeCustomer (data) {
            this.$confirm('此操作将永久删除该用户，是否继续?','提醒',{
                confirmButtonText: '是',
                cancelButtonText: '否',
                customClass: 'custom-message-box',
                center: true
            }).then(() => {
                this.confirmRemoveCus(data)
            }).catch((err) => {
                console.log(err)
            })
        }
        updateCustomer (row) {
            this.$refs['form-update-customer-service'].openDialog({
                id: row.id,
                realName: row.realName,
                description: row.description,
                username: row.username,
                password: ''
            })
        }
        async confirmRemoveCus (id: string|number) {
            let res = await this.$http.delete(`user/${id}`)
            if (res.status == 200) {
                this.getCustomerList();
            }
        }
        async updateUserService (form) {
            let res = await this.$http.put('user/update', form)
            if (res.status == 200) {
                // this.$refs['editCustomerDialog'].closeDialog();
                this.getCustomerList();
            }
        }
        closeDialog () {
            this.$refs['editCustomerDialog'].closeDialog();
        }
        closeDialogs () {
            this.$refs['detailCustomerDialog'].closeDialog();
        }
        // 查询所有角色
        async getAllRoleList () {
            let res = await this.$http.get('role/list')
            if (res.status == 200) {
                this.roleListData = res.data;
            }
        }
        loadDataForPagination () {
            this.getCustomerList();
        }
        mounted () {
            this.getCustomerList();
            this.getAllRoleList();
        }
    }
</script>

<style lang="scss" scoped>

</style>